<template>
    <Modal v-model="visible" width="650" @on-visible-change="visibleChange">
        <p slot="header">
            <Icon type="logo-buffer" :size="22"/>
            <span style="margin-left: 0.5em">{{title}}</span>
        </p>
    <Form ref="objectData" :disabled="!canEdit" :model="objectData" :rules="categoryRuleValidate"
          label-colon autocomplete="off"  :label-width="100">
        <FormItem label="名称"  prop="name">
          <label>
            <Input v-model="objectData.name"></Input>
          </label>
        </FormItem>
        <FormItem label="类型代码"  prop="code">
          <label>
            <Input v-model="objectData.codeType"></Input>
          </label>
        </FormItem>
      <FormItem  prop="valid" label="是否树形" >
          <Select v-model="objectData.isTree" clearable >
            <Option :value=1>是</Option>
            <Option :value=0>否</Option>
          </Select>
      </FormItem>
        <FormItem label="状态"  prop="valid">
            <i-switch v-model="objectData.valid" :true-value=1 :false-value=0 size="large">
                <span slot="open">开启</span>
                <span slot="close">关闭</span>
            </i-switch>
        </FormItem>
        <FormItem label="说明"  prop="remark">
          <label>
            <Input v-model="objectData.remark"></Input>
          </label>
        </FormItem>
    </Form>
        <div slot="footer" v-show="canEdit">
            <Button @click="cancel">取消</Button>
            <Button type="primary" @click="handleSubmit('objectData')">保存</Button>
        </div>
    </Modal>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getById,saveOrUpdate} from "@/api/dictionaryCategoryApi"
import {categoryRuleValidate} from '@/views/settings/dictionary/validator/DictionaryRules'
export default {
  name: "dictionary-category-details",
  props:{
    showData:{
      type: Object,
      required: true
    },
    show: {
      type: Boolean,
      required: true
    },
    canEdit: {
      type: Boolean,
      required: true
    },
    reloadData: {
      type: Boolean,
      required: false,
      default: false
    },
    title: {
      type: String,
      required: true,
    }
  },
  data () {
    return {
      visible: this.show,
      objectData: Object.assign({}, this.showData),
      categoryRuleValidate,
    }
  },
  mounted(){
    this.loadData()
  },
  watch: {
    show (val) {
      this.visible = val
    },
    visible (val) {
      if (val) {
        if (this.reloadData&&(this.showData.id!==null&&this.showData.id!==undefined)){
          getById(this.showData.codeType).then(res=>{
            this.objectData = res
          })
          console.log('showData',this.showData)
        }else{
          this.objectData = Object.assign({}, this.showData)
          console.log('objectData',this.objectData)
        }
      }
    }
  },
  methods: {
    loadData(){

    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let action = 'save';
          if (this.objectData.id){
            action= 'update'
          }
          saveOrUpdate(this.objectData,action).then(res=>{
            this.$Message.success(res)
            this.visible = false
            this.$emit('callbackByOk')
          })
        }
      })
    },
    cancel () {
      this.visible = false
    },
    visibleChange(val){
      if (!val){
        this.$emit('callbackByCancel')
      }
    }
  }
}
</script>

<style scoped>

</style>